<template>
  <div class="content">
    <el-row type="flex" justify="space-between" align="middle">
      <div>
        <el-radio v-model="param.radio" label="0">按项目数量</el-radio>
        <el-radio v-model="param.radio" label="1">按投资金额</el-radio>
      </div>
      <el-row type="flex" align="middle">
        <div class="select">
          <el-select v-model="param.gwType" placeholder="按国资委类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </div>
        <el-checkbox-group v-model="param.type">
          <el-checkbox
            :label="item"
            v-for="(item, index) in typeList"
            :key="index"
          ></el-checkbox>
        </el-checkbox-group>
      </el-row>
    </el-row>
    <div class="chart" ref="myChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "ProductInfo",
  data() {
    return {
      param: {
        radio: "0",
        type: ["股权投资", "固定资产投资"],
        gwType: "",
      },
      typeList: ["股权投资", "固定资产投资"],
      options: [
        { value: "", label: "全部" },
        { value: "基础保障", label: "基础保障" },
        { value: "战略新兴", label: "战略新兴" },
        { value: "战略优势", label: "战略优势" },
      ],
      myChart: null,
      list: [
        {
          date: "2020", // 年份
          type: "股权投资、固定资产投资", // 项目类型
          gwType: "基础保障、战略新兴、战略优势", // 国资委类型
          num: 2, // 项目完成数量
          budgetNum: 14, // 项目预算数量
          rate: 14.29, // 项目完成率
          amount: 79193.26, // 项目投资金额
          budgetAmount: 134146, // 项目预算投资金额
          amountRate: 29.04, // 项目投资金额完成率
        },
        {
          date: "2021",
          type: "股权投资、固定资产投资",
          gwType: "基础保障、战略新兴、战略优势",
          num: 3,
          budgetNum: 7,
          rate: 42.86,
          amount: 49403.73,
          budgetAmount: 108518,
          amountRate: 45.53,
        },
        {
          date: "2022",
          type: "股权投资、固定资产投资",
          gwType: "基础保障、战略新兴、战略优势",
          num: 3,
          budgetNum: 8,
          rate: 37.5,
          amount: 67624.14,
          budgetAmount: 77231.49,
          amountRate: 87.56,
        },
        {
          date: "2023",
          type: "股权投资",
          gwType: "基础保障、战略新兴、战略优势",
          num: 1,
          budgetNum: 8,
          rate: 12.5,
          amount: 15000,
          budgetAmount: 58100,
          amountRate: 25.82,
        },
      ],
    };
  },
  watch: {
    param: {
      handler: function (val, oldVal) {
        if (val) {
          this.getData(val);
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.myChart = echarts.init(this.$refs.myChart);
      this.getData();
    },
    setMyChart(legend, xAxis, max, budgetNum, num, rate) {
      const option = {
        grid: { left: 150, right: 45, bottom: 40, top: 50 },
        legend: {
          itemHeight: 10,
          itemWidth: 10,
          left: "0",
          bottom: "30",
          orient: "vertical",
          textStyle: { color: "#c4ccd7" },
          data: legend,
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            axisLabel: { color: "#ACB6C7" },
            axisLine: { lineStyle: { color: "#6C8097" } },
            data: xAxis,
          },
          {
            type: "category",
            axisTick: { show: false },
            axisLabel: { show: false },
            axisLine: { show: false },
            splitLine: { show: false },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: { color: "#ACB6C7" },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: {
              lineStyle: { type: "dashed", color: " rgba(108,128,151,0.3)" },
            },
          },
          {
            type: "value",
            name: "完成率",
            nameTextStyle: { color: "#ACB6C7", padding: [0, 0, 5, 50] },
            axisLabel: { color: "#ACB6C7", formatter: "{value}%" },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
          },
        ],
        series: [
          {
            type: "bar",
            xAxisIndex: 1,
            itemStyle: { color: "#1C3A65" },
            barWidth: 60,
            emphasis: { disabled: true },
            data: max,
          },
          {
            name: legend[0].name,
            type: "bar",
            barGap: "50%",
            label: { show: true, position: "top", color: "#FFFFFF" },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: legend[0].color },
                  { offset: 0.96, color: "#1D375C" },
                  { offset: 1, color: legend[0].color },
                ]),
              },
            },
            barWidth: 16,
            data: budgetNum,
          },
          {
            name: legend[1].name,
            type: "bar",
            label: { show: true, position: "top", color: "#FFFFFF" },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: legend[1].color },
                  { offset: 0.96, color: "#1D375C" },
                  { offset: 1, color: legend[1].color },
                ]),
              },
            },
            barWidth: 16,
            data: num,
          },
          {
            name: legend[2].name,
            type: "bar",
            type: "line",
            symbolSize: 15,
            yAxisIndex: 1,
            symbol:
              "image://",
            itemStyle: { color: legend[2].color },
            data: rate,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    multiFilter(array, filters) {
      const filterKeys = Object.keys(filters);
      return array.filter((item) => {
        return filterKeys.every((key) => {
          if (!filters[key].length) return true;
          if (filters[key] instanceof Array) {
            return filters[key].some((k) => item[key].indexOf(k) !== -1);
          }
          return !!~item[key].indexOf(filters[key]);
        });
      });
    },
    getData() {
      const { radio, type, gwType } = this.param;
      const list = this.multiFilter(this.list, { type, gwType });
      const color = ["#A57D54", "#159AFF", "#95A7BE"];
      const nameList = [
        ["项目预算数", "项目完成数", "项目完成率"],
        ["预算投资额", "实际投资额", "预算完成率"],
      ];
      const legend = nameList[radio].map((i, index) => {
        return {
          name: i,
          color: color[index],
          itemStyle: { color: color[index] },
        };
      });
      const xAxis = [];
      const budgetNum = [];
      const num = [];
      const rate = [];
      let max = 0;
      list.forEach((i) => {
        xAxis.push(i.date);
        // 按项目数量
        if (radio === "0") {
          let currentMax = Math.max(i.budgetNum, i.num, i.rate);
          if (currentMax > max) {
            max = currentMax;
          }
          budgetNum.push(i.budgetNum);
          num.push(i.num);
          rate.push(i.rate);
        } else {
          // 按投资金额
          let currentMax = Math.max(i.budgetAmount, i.amount, i.amountRate);
          if (currentMax > max) {
            max = currentMax;
          }
          budgetNum.push(i.budgetAmount);
          num.push(i.amount);
          rate.push(i.amountRate);
        }
      });
      const maxData = list.map(() => max);
      this.setMyChart(legend, xAxis, maxData, budgetNum, num, rate);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 295px;
  padding: 20px 25px 0;
  .select {
    margin-right: 30px;
    ::v-deep {
      .el-input__inner {
        width: 150px;
        height: 30px;
        color: #ffffff;
        background: #102c55;
        border: 1px solid rgba(255, 255, 255, 0.12);
      }

      .el-input__icon {
        line-height: 30px;
      }
    }
  }
  .chart {
    width: 970px;
    height: 240px;
  }
}
</style>
